<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/shopcar/index.css">
    <style>
        .card-tabcar{
            width: 95%;
            margin: 0.1rem auto 0 auto;
            height: 0.4rem;
        }
        .card-tabul{
            width: 100%;
            height: 100%;
        }
        .card-tabul li{
            width: 50%;
            text-align: center;
            height: 100%;
            line-height: 0.4rem;
            float: left;
        }
        .card-ls{
            border-right: 1px solid #f5f5f5;
            border-radius: 0.1rem;
            background: #ffffff;
            color: red;
        }
        .default{
            background: #E5383E !important;
            color: #ffffff !important;
        }
        .newcard{
            background: #ffffff !important;
            color: #000 !important;
        }
        .card-yw{
            background: #ffffff;
            color: #000;
            border-left: 1px solid #f5f5f5;
            border-radius: 0.1rem;
        }
    </style>
</head>

<body style="background-color: #F5F5F5">
    <div id="app">
        <div class="head">
            <div class="h-left"></div>
            <div class="h-middle">购物车</div>
            <div class="h-right" @click="bianji">{{is_type==0?'编辑':'完成'}}</div>
        </div>
        <div style="height: .44rem;"></div>
        <!--<div class="card-tabcar">-->
            <!--<ul class="card-tabul">-->
                <!--<li class="card-ls default">零售</li>-->
                <!--<a href="indexShop-yiwu.html">-->
                    <!--<li class="card-yw">积分</li>-->
                <!--</a>-->
            <!--</ul>-->
        <!--</div>-->
        <div style="margin-bottom: 1.2rem">
            <div class="cont" :data-id="item.id" v-for="item in list">
                <!-- <input :id="'color-input-red'+item.cartId" class="chat-button-location-radio-input cont-cex" type="checkbox" name="sub" value="#f0544d" /> -->
                <input :id="'color-input-red'+item.id"  type="checkbox" v-if="is_type==0" :checked="item.isCheck==1?true:false">
                <input :id="'color-input-red'+item.id"  type="checkbox" v-else :checked="item.is_type==1?true:false">
                <label :for="'color-input-red'+item.id" @click="checked"></label>
                <div class="cont-img">
                    <img :src="ImageUrl + item.goodsImg" alt="">
                </div>
                <div class="cont-text">
                    <div class="c-t-p">
                        {{item.goodsName}}
                    </div>
                    <div class="redMoney">￥{{item.shopPrice}}</div>
                </div>
                <div class="numberBox">
                    <!--<div class="inpLeft" id="jian" @click="jian"></div>-->
                    <input type="tel" class="inpmiddle" id="input-num" hidden :value="item.cartNum">
                    <!--<div class="inpRight" id="jia" @click="jia"></div>-->
                </div>
            </div>
        </div>
        <div class="container">
            <input id="color-input-red2" type="checkbox" name="color-input-red" value="#f0544d" />
            <span class="container-sp2">合计：<span class="redColor num_money">￥{{sum_money}}</span></span>
            <div class="submit jiesuan">
                <a href="javascript:void(0)" @click="location" v-if="is_type==0">结算</a>
                <a href="javascript:void(0)" @click="deleteItem" v-else>删除</a>
            </div>
            <div class="submit delete">删除</div>
        </div>
        <div class="foot" style="border: 0">
            <div class="foot-item" onclick="location.href='../index/index.html'">
                <div class="f-i-i foot1"></div>
                <p class="">首页</p>
            </div>
            <!--onclick="location.href='../../aliancemerchant/index.html'"-->
            <!--<div class="foot-item">-->
                <!--<div class="f-i-i foot2"></div>-->
                <!--<p>积分商城</p>-->
            <!--</div>-->
            <div class="foot-item" onclick="location.href='../shopcar/indexShop.html'">
                <div class="f-i-i foot33"></div>
                <p class="isactive">购物车</p>
            </div>
            <div class="foot-item" onclick="location.href='../personal/index.html'">
                <div class="f-i-i foot4"></div>
                <p class="">我的</p>
            </div>
        </div>
    </div>
    <script src="../../js/jquery-2.2.3.min.js"></script>
    <script src="../../js/rem.js"></script>
    <script src="../../js/common.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                abc:true,
                list: [],
                // checkbox: [],
                sum_money: 0,
                is_type: 0,
                backup_list: []
            },
            mounted: function () {
                this.$nextTick(function () {
                    var _this = this;
                    this.$http.post(SURL + '/api/xlscart/getCartInfo', {
                        userId: localStorage.getItem('userId'),
                        pageNum: 1,
                        type: 1
                    }, {
                        emulateJSON: true
                    }).then(function (res) {
                        // _this.list.length=0;

                        var _data = res.body.data;
                        var eleGoods = _data;
                        if(eleGoods == '') {

                        }else {
                            eleGoods.forEach(element => {
                                const element2 = element;
                                _this.list.push(element2);
                            });
                            this.public();
                        }
                    })
                })
            },
            methods: {
                jian: function (e) {
                    var list10 = this.list;
                    var element3 = e.target;
                    var _val = $(element3).next().val();
                    var _cid = $(element3).parents('.cont').data('id');
                    if (_val > 1) {
                        var sum = _val - 1;
                        for (let i1 = 0; i1 < list10.length; i1++) {
                            const element10 = list10[i1];
                            if (element10.cartId == _cid) {
                                element10.cartNum = sum;
                            }
                        }
                        this.public();
                        window.location.reload();
                    }
                    this.public2(_cid);
                },
                jia: function (e) {
                    var list10 = this.list;
                    var element4 = e.target;
                    var _val3 = parseInt($(element4).prev().val());
                    var _cid2 = $(element4).parents('.cont').data('id');
                    if (_val3 >= 1) {
                        var sum2 = _val3 + 1;
                        for (let i1 = 0; i1 < list10.length; i1++) {
                            const element10 = list10[i1];
                            if (element10.cartId == _cid2) {
                                element10.cartNum = sum2;
                            }
                        }
                        this.public();
                        window.location.reload();
                    }
                    this.public2(_cid2);
                },
                checked: function (e) {
                    var element5 = e.target;
                    var _id = $(element5).parents('.cont').data('id');
                    // var _type = $('#color-input-red'+_id).prop('checked');
                    if (this.is_type == 0) {				
                        for (let iii = 0; iii < this.list.length; iii++) {
                            const element7 = this.list[iii];
                            if (_id == element7.id) {
                                var _type8 = element7.isCheck;
                                if (_type8 == '1') {
                                    var _ddd = {
                                        isCheck: '-1',
                                        userId: localStorage.getItem('userId'),
                                        id: element7.id,
                                        goodsId: element7.goodsId,
                                        cartNum: element7.cartNum,
                                        goodsType: element7.goodsType,
                                        type: 1
                                    }
                                } else {
                                    var _ddd = {
                                        isCheck: '1',
                                        userId: localStorage.getItem('userId'),
                                        id: element7.id,
                                        goodsId: element7.goodsId,
                                        cartNum: element7.cartNum,
                                        goodsType: element7.goodsType,
                                        type: 1
                                    }
                                }
                                this.$http.post(SURL + '/api/xlscart/updateCart', _ddd, {
                                    emulateJSON: true
                                }).then(function (res) {
									if (res.body.status == 1){
										var arr4 = this.list;
										for (var k = 0; k < arr4.length; k++) {
										    var el5 = arr4[k];
										    if (_id == el5.id) {
										        el5.isCheck = _ddd.isCheck;
										    }
										}
										this.public();
									}else{
										alert(res.body.msg);
									}
                                })
                                break;
                            }
                        }
                    }
                },
                location: function () {
                    localStorage.removeItem('addressId');

                    if (this.sum_money == 0) {

                        alert('请选择商品')

                    } else {
                        window.location.href = '../place_order.html';
                    }
                },
                bianji: function () {
                    this.is_type = !this.is_type;
                },
                public: function () {
                    var arr8 = this.list;
                    // console.log(arr8)
                    // console.log(arr8.length)
                    // console.log(this.list.length)
                    // console.log(Array.isArray(arr8))
                    this.sum_money = 0;
                    for (var k8 = 0; k8 < arr8.length; k8++) {
                        var el8 = arr8[k8];
                        if (el8.isCheck == '1') {
                            var sum10 = el8.cartNum * el8.shopPrice;
                            this.sum_money += sum10;
                        }
                    }
                },
                public2: function (id) {
                    // console.log(id);
                    var list15 = this.list;
                    for (var u1 = 0; u1 < list15.length; u1++) {
                        var e10 = list15[u1];
                        if (e10.cartId == id) {
                            var _ccc = {
                                isCheck: e10.cartId,
                                userId: localStorage.getItem('userId'),
                                cartId: e10.cartId,
                                goodsId: e10.goodsId,
                                cartNum: e10.cartNum,
                                goodsType: e10.goodsType
                            };
                            this.$http.post(SURL + '/jfd/cart/updateCart', _ccc, {
                                emulateJSON: true
                            }).then(function (res) {
                                var arr4 = this.list;
                                for (var k = 0; k < arr4.length; k++) {
                                    var el5 = arr4[k];
                                    if (_id == el5.cartId) {
                                        el5.isCheck = _ddd.isCheck;
                                    }
                                }
                            })
                        }

                    }
                },
                deleteItem: function () {
                    // console.log('sdfsafs')
                    var _carr = '';
                    var objcc = document.querySelectorAll('input:checked');
                    for (let index = 0; index < objcc.length; index++) {
                        const element = objcc[index];
                        var id = element.parentElement.getAttribute('data-id');
                        _carr = _carr + id + ',';
                    }
                    this.$http.post(SURL + '/api/xlscart/remove', {
                        ids: _carr
                    }, {
                        emulateJSON: true
                    }).then(function (res) {
                        if (res.body.status == 1) {
                            window.location.reload();
                        }else{
							alert(res.body.msg);
						}
                    })
                }
            }
        })
    </script>
</body>

</html>
